<template>
	<div class="layout-padding">
		<div class="layout-padding-auto layout-padding-view">
			<!-- 资费概览 -->
			<el-card>
				<template #header>
					<div class="flex items-center justify-between">
						<div class="text-lg font-semibold">资费概览</div>
						<el-button icon="refresh" text type="primary" @click="getData">刷新</el-button>
					</div>
				</template>
				<div class="flex justify-around py-6">
					<div class="flex items-center">
						<div class="text-primary">
							<el-icon size="50"><Monitor /></el-icon>
						</div>
						<div class="pl-4">
							<div class="py-1">设备数量</div>
							<div>
								<span class="text-lg font-semibold text-primary">{{ queryInfo.data?.deviceRemainNum || 0 }}</span>
								<span class="pl-1">台</span>
							</div>
						</div>
					</div>
					<div class="flex items-center">
						<div class="text-warning">
							<el-icon size="54"><Message /></el-icon>
						</div>
						<div class="pl-4">
							<div class="py-1">短信数量</div>
							<div>
								<span class="text-lg font-semibold text-warning">{{ queryInfo.data?.smsRemainNum || 0 }}</span>
								<span class="pl-1">条</span>
							</div>
						</div>
					</div>
					<div class="flex items-center">
						<div class="text-success">
							<el-icon size="50"><Phone /></el-icon>
						</div>
						<div class="pl-4">
							<div class="py-1">语音数量</div>
							<div>
								<span class="text-lg font-semibold text-success">{{ queryInfo.data?.ttsRemainNum || 0 }}</span>
								<span class="pl-1">分钟</span>
							</div>
						</div>
					</div>
				</div>
			</el-card>
			<!-- 资费配置，本月使用情况 -->
			<div class="mt-6">
				<el-row :gutter="20">
					<el-col :span="16">
						<el-card header="资费配置">
							<div class="flex justify-around">
								<div class="flex flex-col items-center">
									<div class="text-success border-success border-[2px] rounded-[12px] w-[60px] h-[60px] flex items-center justify-center">
										<el-icon size="30"><Phone /></el-icon>
									</div>
									<div class="my-1">语音管理</div>
									<el-button link @click="handleGo('/tariff/basicExpensesDeptDetail/index')"
										>查看详情<el-icon class="ml-1"><DArrowRight /></el-icon
									></el-button>
								</div>
								<div class="flex flex-col items-center">
									<div class="text-warning border-warning border-[2px] rounded-[12px] w-[60px] h-[60px] flex items-center justify-center">
										<el-icon size="30"><Message /></el-icon>
									</div>
									<div class="my-1">短信管理</div>
									<el-button link @click="handleGo('/tariff/basicExpensesDeptDetail/index')"
										>查看详情<el-icon class="ml-1"><DArrowRight /></el-icon
									></el-button>
								</div>
								<div class="flex flex-col items-center">
									<div class="text-[#6366f7] border-[#6366f7] border-[2px] rounded-[12px] w-[60px] h-[60px] flex items-center justify-center">
										<el-icon size="30"><Platform /></el-icon>
									</div>
									<div class="my-1">平台年限管理</div>
									<el-button link @click="handleGo('/tariff/basicExpensesDeptDetail/index')"
										>查看详情<el-icon class="ml-1"><DArrowRight /></el-icon
									></el-button>
								</div>
								<div class="flex flex-col items-center">
									<div class="text-primary border-primary border-[2px] rounded-[12px] w-[60px] h-[60px] flex items-center justify-center">
										<el-icon size="30"><Monitor /></el-icon>
									</div>
									<div class="my-1">设备管理</div>
									<el-button link @click="handleGo('/tariff/basicExpensesDviceConfig/index')"
										>查看详情<el-icon class="ml-1"><DArrowRight /></el-icon
									></el-button>
								</div>
							</div>
						</el-card>
					</el-col>
					<el-col :span="8">
						<el-card header="本月使用数量" class="h-full">
							<div class="flex items-center justify-between px-4 pb-1 border-b-[1px] border-br border-dashed">
								<span>设备使用数</span>
								<span>{{ queryInfo.data?.queryLastMonthDeviceAddTotal || 0 }}</span>
							</div>
							<div class="flex items-center justify-between px-4 py-1 mt-2 border-b-[1px] border-br border-dashed">
								<span>短信使用数</span>
								<span>{{ queryInfo.data?.queryLastMonthSmsAddTotal || 0 }}</span>
							</div>
							<div class="flex items-center justify-between px-4 py-1 mt-2 border-b-[1px] border-br border-dashed">
								<span>语音使用数</span>
								<span>{{ queryInfo.data?.queryLastMonthTtsAddTotal || 0 }}</span>
							</div>
						</el-card>
					</el-col>
				</el-row>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts" name="GeneralSituation">
import { querySmsTtsCount } from '/@/api/tariff/basicExpensesDeptDetail';
import { useRouter } from 'vue-router';
const router = useRouter();
const queryInfo = reactive({
	data: {
		deviceRemainNum: 0,
		queryLastMonthDeviceAddTotal: 0,
		queryLastMonthSmsAddTotal: 0,
		queryLastMonthTtsAddTotal: 0,
		smsRemainNum: 0,
		ttsRemainNum: 0,
	},
});
const getData = () => {
	querySmsTtsCount().then((res) => {
		Object.assign(queryInfo.data, res.data);
	});
};
getData();
const handleGo = (path: string) => {
	router.push({
		path,
	});
};
</script>

<style lang="scss" scoped></style>
